<template>
	<view class="body">
		<view class="title"><image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp5.itc.cn%2Fimages01%2F20201214%2F8d3b6cde823e422e9a58e8ceb69edcb8.png&refer=http%3A%2F%2Fp5.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655898871&t=d6be2cc39b36ca573db0f6aacbb56ccd" mode=""></image>
		<text class="dt">答&nbsp&nbsp&nbsp&nbsp题</text></view>
		<view class="">
			<view class="xuan" v-if="lists[i].qtype==1">
				<view class="ti">{{'单选题'+':'+lists[i].qname}}</view>
				<view class="radiostyle">
					<label class="radio" :class="{radiotarget:item.ch}" v-for="item in lists[i].items"
						@click="radio(lists[i].items,item,lists[i])">
						<radio :checked="item.ch" :disabled="disabled" /><text>{{item.itemname}}</text>
					</label>
				</view>
			</view>
			<view class="xuan" v-if="lists[i].qtype==2">
				<view class="ti">{{'多选题'+':'+lists[i].qname}}</view>
				<view class="radiostyle">
					<label class="radio" :class="{radiotarget:item.ch}" v-for="item in lists[i].items"
						@click="checkbox(lists[i].items,item,lists[i])">
						<radio :checked="item.ch" :disabled="disabled" /><text>{{item.itemname}}</text>
					</label>
				</view>
			</view>
		</view>
		<view class="upnoup">
			<view class="up" v-if="i>0?true:false" @click="i--">上一题</view>
			<view class="up" v-if="i<lists.length-1?true:false" @click="i++">下一题</view>
		</view>
		<view>
			<button type="default" v-if="compat">去主页</button>
			<button class="tj" @click="obk" v-else>提交</button>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				i: 0,
				option: [],
				lists: [],
				disabled: false,
				compat: false
			}
		},
		computed: {
			...mapState('m_user', ['token']),
		},
		created() {
			if (uni.getStorageSync('token') !== '') {
				uni.request({
					//api地址
					url: 'https://anmti.cn/canlogin/sinInTimes',
					//设置请求类型等于外部传入类型
					method: 'get',
					//配置请求头信息
					header: {
						"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
					},
					//请求成功
					success: (res) => {
						console.log(res);
						if (res.statusCode !== 200) return uni.$showMsg()
						if (res.data === 'nologin,canlogin') {
							this.updateToken('')
							uni.switchTab({
								url: "../../pages/my/my"
							})
							return uni.showToast({
								title: '请重新登录！',
								icon: 'none',
								duration: 2000,
							})

						}
					},
					//请求失败
					fail: (err) => {
						console.log(err);
					},
				})
			} else {
				uni.switchTab({
					url: "../../pages/my/my"
				})
				return uni.showToast({
					title: '请登录！',
					icon: 'none',
					duration: 2000,
				})
			}
			this.getData1()
		},



		methods: {
			...mapMutations('m_user', ['updateToken']),
			radio(es, item, list) {
				// console.log(item.ch)
				item.ch = !item.ch;
				for (let s in es) {
					if (es[s] !== item && es[s].ch == true)
						es[s].ch = false;
				}

				//3次实验
				console.log("this.option" + "=" + this.option);
				let temp = this.option.find(x => {
					return x.qid === list.qid;
				})
				// console.log("list.qid" + "=" + list.qid)
				// console.log("list" + "=" + list)
				console.log("temp" + "=" + temp)
				console.log("item.iid" + "=" + item.iid)
				let radioanswer = {
					'iid': item.iid,
					'itemname': item.itemname
				}
				console.log("radioanswer.iid" + "=" + radioanswer.iid)
				let radio = {
					'qtype': list.qtype,
					'qid': list.qid,
					'answer': []
				}
				// console.log("radio" + "=" + radio)
				// console.log("radioanswer" + "=" + radioanswer)
				if (temp === undefined) {
					radio.answer.push(radioanswer)
					this.option.push(radio)
					console.log("temp" + "=" + temp)
				} else {
					let radiofu = undefined;
					console.log("temp" + "=" + temp)
					console.log("radioanswer.iid" + "=" + radioanswer.iid)
					// radiofu=temp.answer.find(x=>{
					// 	return x.iid===radioanswer.iid
					// })
					for (var i in temp.answer) {
						if (temp.answer[i].iid === radioanswer.iid) {
							radiofu = !radiofu;
						}
					}
					console.log("radiofu" + "=" + radiofu)
					console.log("纯在")
					if (radiofu === undefined) {
						console.log("题目纯在选项不纯在")
						console.log("radiofu" + "=" + radiofu)
						// console.log("rasioanswer"+"="+radioanswer)
						temp.answer = [];
						temp.answer = radioanswer
					} else {
						console.log("题目纯在选项存在")
						console.log("radiofu" + "=" + radiofu)
						// console.log("rasioanswer"+"="+radioanswer)
						temp.answer = [];
					}
				}
				for (var i in this.option) {
					console.log(this.option[i])
				}

			},
			checkbox(es, item, list) {
				item.ch = !item.ch;
				let checkbox = {
					'iid': item.iid,
					'itemname': item.itemname
				}
				let temp = this.option.find(x => {
					return x.qid === list.qid;
				})
				console.log(temp)
				if (temp === undefined) {
					temp = {
						'qtype': list.qtype,
						'qid': list.qid,
						'answer': []
					}
					temp.answer.push(checkbox)
					this.option.push(temp)
				} else {
					let tempcheckbox = temp.answer.find(x => {
						return x.iid === item.iid
					})
					if (tempcheckbox === undefined) {
						temp.answer.push(checkbox)
					} else {
						temp.answer = temp.answer.filter(x => {
							return x.iid !== checkbox.iid
						})
					}
				}
			},
			obk() {
				var lenOption = this.option.length;
				var lenLists = this.lists.length;
				if (lenLists > lenOption) {
					uni.showModal({
						title: '答题未完成',
						content: '确认要提交吗？',
						success: res => {
							if (res.confirm) {
								console.log('点击了确认')
								console.log(this.option);
								this.requ();
							} else {
								console.log('点击了取消')
								console.log(this.option);

							}
						}
					})
				} else {
					this.requ();
				}
			},
			requ() {
				uni.request({
					url: 'https://anmti.cn/canlogin/subAnswer', //后端接口地址：服务器 加 路由
					method: 'POST',
					header: {
						'content-type': "application/x-www-form-urlencoded",
						"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
					},
					data: {
						test: JSON.stringify(this.option)
					},
					success: (res) => {
						// 服务器返回结果
						uni.showToast({
							title: "提交成功，获得" + res.data + '积分',
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000 //持续时间为 2秒
						})
						this.disabled = true;
						this.compat = true;
						console.log(res)
					}
				})
				uni.navigateBack({
					delta: 1
				})
			},
			async getData1() {
				await this.getData()
				for (let x in this.lists) {
					for (let y in this.lists[x].items) {
						this.lists[x].items[y].ch = false;
					}
				}
				console.log(this.lists)
			},
			getData: function() {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'https://anmti.cn/canlogin/getQuestionDate',
						method: 'GET',
						header: {
							"Cookie": "JSESSIONID=" + uni.getStorageSync('token').JseSsionId,
						},
						success: (res) => {
							this.lists = res.data;
							resolve('suc');
						},
						fail: (err) => {
							reject('err');
						}
					})
				})
			},
		},
	}
</script>


<style>
	* {
		padding: 0;
		margin: 0;
	}
	.title {
		position: relative;
		background-color: #9370DB;
		height: 80px;
		line-height: 50px;
		text-align: center;
		font-weight: 700;
		color: #FFFFFF;
		font-size: 26px;
	}
	image{
		position: absolute;
		left: 5px;
		top: -35px;
		width: 150px;
		height: 150px;
	}
	.ti {
		/* width: 250px; */
		height: 50px;
		line-height: 50px;
		font-weight: 500;
		margin-top:5%;
		font-size: 18px;
		margin-bottom: 10px;
		margin-left: 5px;
		letter-spacing: 3px;
		color: 	#545454;
	}
	.dt{
		position: absolute;
		left: 170px;
		top: 20px;
	}
	radio{
		margin-left: 20px;
		margin-right: 15px;
	}

	.radiostyle {
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		color: 	#545454;
	}

	.radio {
		height: 60px;
		line-height: 60px;
		margin-bottom:10px;
		vertical-align: middle;
		background: rgba(255,255,255,1);
	}
	.upnoup {
		display: flex;
		justify-content: space-around;
	}

	.up {
		width: 40%;
		height: 40px;
		border-radius: 10px;
		margin-top: 40px;
		padding: 0 0 2% 0;
		line-height: 40px;
		text-align: center;
		/* font-weight: 700; */
		background-color: #9370DB;
		color: #FFFFFF;
		font-size: 18px;
	}

	radio .wx-radio-input.wx-radio-input-checked {
		background: rgb(240, 91, 114);
		border: 1px solid rgb(240, 91, 114);
	}


	.radiotarget {
		background-color:#9370DB;
	}

	.radio text {
		font-size: 16px;
	}
	.tj{
		margin-top: 8%;
		background-color:	#EAEAEA;
		width: 40%;
		height: 40px;
		border-radius: 10px;
		line-height: 40px;
		text-align: center;
		color: 	#545454;
		font-size: 18px;
	}
</style>
